// 自定义一些通用的compositions api
import { useIntersectionObserver, useIntervalFn } from '@vueuse/core'
import { ref, onBeforeUnmount, onMounted } from 'vue'

// 封装通用的数据懒加载api
export function useLazyData(apiFn: () => void) {
  // 通过 ref 获得组件实例
  const target = ref(null)
  const { stop } = useIntersectionObserver(
    // target 是观察的目标dom容器，必须是dom容器，而且是vue3.0方式绑定的dom对象
    target,
    // isIntersecting 是否进入可视区域，true是进入 false是移出
    // observerElement 被观察的dom
    ([{ isIntersecting }]) => {
      // 在此处可根据isIntersecting来判断，然后做业务
      if (isIntersecting) {
        stop()
        apiFn()
      }
    }, {
    // threshold 容器和可视区交叉的占比（进入的面积/容器完整面积） 取值，0-1 之间，默认比0大，所以需要滚动较多才能触发进入可视区域事件。  阈值   (进入的面积/容器完整面积)
    // 预值
    threshold: 0
  }
  )
  return target
}

// 监听滚动条的滚动，获取滚动的距离，滚动距离 >=78 动态的设置 show 类
// 等dom加载完，注册事件监听 created  mounted(注册生命周期事件)
// 滚动条
export function useHMScrollY() {
  const y = ref(0);
  const onscroll = () => {
    const scrollTop =
      document.documentElement.scrollTop || document.body.scrollTop;
    y.value = scrollTop;
  };
  onMounted(() => {
    window.addEventListener("scroll", onscroll);
  });
  onBeforeUnmount(() => {
    window.addEventListener("scroll", onscroll);
  });
  return y;
}
// const y = useHMScrollY();
// 工具包 hooks库 => 封装的一些工具函数 =>称之为hooks



// 倒计时按钮
export function useCountDown(count: number = 60) {
  const time = ref(0)// 倒计时的秒数
  // let timeId = -1

  const { pause, resume } = useIntervalFn(() => {
    // console.log('我的逻辑');
    time.value--
    if (time.value <= 0) pause()
  }, 1000,
    {
      immediate: false
    })
  const start = () => {
    // 初始化倒计时的秒数，并开始倒计时
    time.value = count// 定时器从什么时间开始倒计时
    resume()// 恢复60s
  }
  // 如果组件被卸载了，也要清除定时器
  // onMounted(() => {
  //   pause()
  // })
  return {
    time,
    start
  }
}